<template>
  <div class="flex">
    <div class="left_div">
      <!-- <div class="common_fff flex_ac_jc flex_d">
        <div class="com_tt">事项类型占比</div>
        <div style="width: 180px; height: 180px; margin: 20px 0; position: relative;">
          <div class="r_chart" id="echart2"  style="width: 100%; height: 100%;">

          </div>
          <div class="flex_ac_jc bin_data flex_d">
            <div class="p">{{all_num.all_num || 0}}</div>
            <div class="t">事项总计</div>
          </div>
        </div>
        <div class="colors_div">
          <div class="flex_ac item" :class="'item'+index" v-for="(item,index) in db_type" :key="index">
            <div class="c"></div>
            <div class="flex1">{{item.name || 0}}</div>
            <div class="num">{{item.all_num || 0}}项</div>
            <div class="num">{{item.rate || '0%'}}</div>
          </div>
        </div>
      </div> -->

      <div class="common_fff flex_ac_jc flex_d">
        <div class="com_tt">事项来源占比</div>
        <div style="width: 180px; height: 180px; margin: 20px 0; position: relative;">
          <div class="r_chart" id="echart3"  style="width: 100%; height: 100%;">

          </div>
          <div class="flex_ac_jc bin_data flex_d">
            <div class="p">{{all_num.all_num || 0}}</div>
            <div class="t">事项总计</div>
          </div>
        </div>
        <div class="colors_div">
          <div class="flex_ac item" :class="'item'+index" v-for="(item,index) in db_ly" :key="index">
            <div class="c"></div>
            <div class="flex1">{{item.name || 0}}</div>
            <div class="num">{{item.all_num || 0}}项</div>
            <div class="num">{{item.rate || '0%'}}</div>
          </div>
        </div>

      </div>

      <div class="common_fff">
        <div class="com_tt">主办部门事项进展统计</div>
        <div class="flex_ac_jc flex_ac colors2">
          <div class="item flex_ac"><div class="c c0"></div><div>已逾期</div></div>
          <div class="item flex_ac"><div class="c c1"></div><div>进行中</div></div>
          <div class="item flex_ac"><div class="c c2"></div><div>已终止</div></div>
          <div class="item flex_ac"><div class="c c3"></div><div>已办结</div></div>
        </div>
        <div class="dlist">
          <div class="item" v-for="(item,index) in unit_statistics" :key="index">
            <div class="item_t flex_ac">{{item.name}} <span class="margin_a">{{item.all_num}}</span></div>
            <div class="bar flex_ac">
              <div class="bars bars1" :style="'width:'+(item.all_num==0?0:(parseInt(item.ycq_num)*100/parseInt(item.all_num)))+'%;'" v-if="item.all_num!=0 && item.ycq_num!=0">{{item.ycq_num}}</div>
              <div class="bars bars2" :style="'width:'+(item.all_num==0?0:(parseInt(item.jxz_num)*100/parseInt(item.all_num)))+'%;'" v-if="item.all_num!=0 && item.jxz_num!=0">{{item.jxz_num}}</div>
              <div class="bars bars3" :style="'width:'+(item.all_num==0?0:(parseInt(item.yzz_num)*100/parseInt(item.all_num)))+'%;'" v-if="item.all_num!=0 && item.yzz_num!=0">{{item.yzz_num}}</div>
              <div class="bars bars4" :style="'width:'+(item.all_num==0?0:(parseInt(item.ybj_num)*100/parseInt(item.all_num)))+'%;'" v-if="item.all_num!=0 && item.ybj_num!=0">{{item.ybj_num}}</div>
            </div>
          </div>
        </div>
      </div>

    </div>
    <div class="flex1" style="padding: 0 10px;">
      <div class="common_fff">
        <div class="com_tt">分类事项进展统计</div>
        <div class="tj_div flex">
          <div class="tj_item">
            <div class="t">总数</div>
            <div class="pp">{{all_num.all_num || 0}}</div>
          </div>
          <div class="tj_item">
            <div class="t">进行中</div>
            <div class="pp">{{all_num.jxz_num || 0}}</div>
          </div>
          <div class="tj_item">
            <div class="t">已办结</div>
            <div class="pp">{{all_num.ybj_num || 0}}</div>
          </div>
          <div class="tj_item">
            <div class="t">已终止</div>
            <div class="pp">{{all_num.yzz_num || 0}}</div>
          </div>
          <div class="tj_item">
            <div class="t">已逾期</div>
            <div class="pp">{{all_num.ycq_num || 0}}</div>
          </div>
          <div class="tj_item">
            <div class="t">已暂缓</div>
            <div class="pp">{{all_num.yzt_num || 0}}</div>
          </div>
        </div>
        <div class="flex_ac_jc flex_ac colors2">
          <div class="item flex_ac"><div class="c c2"></div><div>总数</div></div>
          <div class="item flex_ac"><div class="c c3"></div><div>已办结</div></div>
        </div>
        <div style="height: 300px;" id="echart1">

        </div>
      </div>
      <div class="common_fff">
        <div class="com_tt">分管领导事项统计</div>
        <div class="dlist">
          <div class="item" v-for="(item,index) in ho_data" :key="index">
            <div class="item_t flex_ac">{{item.name}} <span class="margin_a">{{item.all_num}}</span></div>
            <div class="bar flex_ac">
              <div class="bars bars_all" :style="'width:'+item.rate+';'">{{item.rate}}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- <div class="right_div">

    </div> -->
  </div>
</template>

<script>
import * as echarts from 'echarts';
let options1={
  tooltip: {
      trigger: 'axis',
      backgroundColor:'rgba(0,0,0,0.5)',
      textStyle:{
        color:'#fff'
      },
      fontSize:14,
      borderColor:'rgba(0,0,0,0)',
      // formatter:function(data){
      //   console.log(data);
      //   return data[0].value+'人'
      // }
  },
  // color:['red','green'],
  // dataZoom: [{
  //     type: 'inside'
  // }],
  xAxis: {
      type: 'category',
      axisLabel:{
          color:'#666',
          fontSize:10
      },
      axisLine: {
          show: true,
          lineStyle: {
              color: 'rgba(0,0,0,0.1)'
          }
      },
      boundaryGap:true,
      data: []
  },
  dataZoom: [{
  	type: 'inside'
  }],
  yAxis: {
      name:'',
      nameTextStyle:{
        color:'#fff'
      },

      type: 'value',
      axisLabel:{
          color:'#666'
      },
      splitLine:{
          show:false
      },
      axisLine: {
          show: true,
          lineStyle: {
              color: 'rgba(0,0,0,0.1)'
          }
      },
  },
  grid:{
      left:10,
      top:40,
      right:10,
      bottom:10,
      containLabel:true
  },
  series: []
}

let option2 = {

  series: [
    {
      name: '类型占比',
      type: 'pie',
      radius: ['65%', '80%'],
      avoidLabelOverlap: false,
      padAngle: 2,
      itemStyle: {
        borderRadius: 3
      },
      label: {
        show: false,
        position: 'center'
      },
      // emphasis: {
      //   label: {
      //     show: false,
      //     fontSize: 20,
      //     fontWeight: 'bold'
      //   }
      // },
      labelLine: {
        show: false
      },
      data: [
        { value: 1048, name: 'Search Engine' },
        { value: 735, name: 'Direct' },
        { value: 580, name: 'Email' },
        { value: 484, name: 'Union Ads' },
        { value: 300, name: 'Video Ads' }
      ]
    }
  ]
};
let myChart1
let myChart2
let myChart3
let myChart4
let myChart5
export default {
  name: 'needCache',
  data () {
    return {
      activeName:'1',  // 1进行中 2 已结束
      loading: true,
      total: 0,
      // 定时任务表格数据
      alarm: [],
      inspection:[],
      // 查询参数
      queryParams: {
        page: 1,
        limit: 16,
        keywords: undefined,
        status: undefined
      },
      openOptions: [{id:'1',title:'选项1'},{id:'2',title:'选项2'}],
      open:false,
      type1:'month',  //day, week, month,, year
      all_num1:0,
      type2:'month',  //day, week, month,, year
      all_num2:0,
      all_num:{},
      db_ly:[],
      db_type:[],
      ho_data:[],
      unit_statistics:[],
      month_data:[]
    }
  },
  activated() {
    // this.init_chart()
    // this.getList();
    this.get_data1();
    // this.get_data2()
  },
  methods:{
    init_chart(){
      const _this=this;
      _this.$nextTick(()=>{
        let _data={...options1};

        _data.xAxis.data=_this.month_data.map(v=>v.month);
        _data.series=[
          {
            data: _this.month_data.map(v=>parseInt(v.published_num)),
            type: 'line',
            name:'总数',
            itemStyle: {
                normal: {
                    color: '#2e73ea' // 第一个系列的颜色为红色
                }
            }
          },
          {
            data: _this.month_data.map(v=>parseInt(v.completed_num)),
            type: 'line',
            name:'已办结',
            itemStyle: {
                normal: {
                    color: '#28b84a' // 第一个系列的颜色为红色
                }
            }
          }
        ]
        if(!myChart1){
          myChart1 = echarts.init(document.getElementById('echart1'));
        }
        myChart1.setOption(_data,true);

        let _data2={...option2}
        let  colors=['#2e73ea','#28b84a','#f59e0b','#ef4444','#c925d5','#25d5b0','#d5d5d5']

        let datas2=[];
        for(let i=0;i<_this.db_type.length;i++){
          datas2.push({ value: _this.db_type[i].all_num, name:  _this.db_type[i].name,itemStyle:{color:colors[i%colors.length]}})
        }
        _data2.series[0].data=datas2

        // if(!myChart2){
        //   myChart2 = echarts.init(document.getElementById('echart2'));
        // }
        // myChart2.setOption(_data2,true);




        let _data3={...option2}
        let datas3=[];
        for(let i=0;i<_this.db_ly.length;i++){
          datas3.push({ value: _this.db_ly[i].all_num, name:  _this.db_ly[i].name,itemStyle:{color:colors[i%colors.length]}})
        }
        _data3.series[0].data=datas3

        if(!myChart3){
          myChart3 = echarts.init(document.getElementById('echart3'));
        }
        myChart3.setOption(_data3,true);

      })
    },
    tab_type1(type){
      if(this.type1!=type){
        this.type1=type;
        this.get_data1()
      }
    },
    get_data1(){
      const _this=this;
      this.loading = true;
      _this.axios.get("/manage/Statistics/index", {params:{}}).then(function(res) {
        if(res){
          _this.all_num=res.message.all_num;
          _this.db_ly=res.message.db_ly;
          _this.db_type=res.message.db_type;
          _this.ho_data=res.message.ho_data;
          _this.unit_statistics=res.message.unit_statistics;
          _this.month_data=res.message.month_data;
          _this.init_chart()

        }
      }).catch(function(error) {
        console.log(error);
      })
    },

    tab_type2(type){
      if(this.type2!=type){
        this.type2=type;
        this.get_data2()
      }
    },
    get_data2(){
      const _this=this;
      this.loading = true;
      _this.axios.get("/api/Index/pieChartMachineRoomRecrd", {params:{period:_this.type2}}).then(function(res) {
        if(res){
          let all_num=0;
          for(let i=0;i<res.data.length;i++){
            all_num+=parseFloat(res.data[i].value)
          }
          _this.all_num2=all_num;
          let _data={...options2};
          _data.series[0].data=res.data;
          _this.$nextTick(()=>{
            if(!myChart3){
              myChart3 = echarts.init(document.getElementById('chart_d3'));
            }
            myChart3.setOption(_data);
          })
          // _this.alarm=alarm;
          // _this.inspection=inspection;
        }
      }).catch(function(error) {
        console.log(error);
      })
    },
    /** 查询定时任务列表 */
    getList() {
      const _this=this;
      this.loading = true;
      _this.axios.get("/api/Index/index", {params:{}}).then(function(res) {
        if(res){
          let alarm=[];
          for(let i=0;i<res.data.alarm.length;i++){
            if(alarm.length<9){
              alarm.push(res.data.alarm[i])
            }else{
              break
            }
          }
          let inspection=[];
          for(let i=0;i<res.data.inspection.length;i++){
            if(inspection.length<9){
              inspection.push(res.data.inspection[i])
            }else{
              break
            }
          }
          _this.alarm=alarm;
          _this.inspection=inspection;
        }
      }).catch(function(error) {
        console.log(error);
      })
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.page = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.queryParams={
        page: 1,
        limit: 16,
        keywords: undefined,
        status: undefined
      }
      this.handleQuery();
    }

  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.left_div,.right_div{width: 20%; min-width: 280px; line-height: 1.2;}
.common_fff{border-radius: 10px; background: #fff; padding: 20px; margin-bottom: 10px; line-height: 1.2;}
.common_fff .com_tt{font-size: 16px; font-weight: bold; margin-bottom: 10px; width: 100%; text-align: left;}
.common_fff .colors_div{width: 100%;}
.common_fff .colors_div .item{padding: 5px 0; color: #777; font-size: 14px;}




.common_fff .colors_div .num{width: 70px; color: #333; text-align: right;}
.common_fff .colors_div .c{width: 10px; height: 10px; background: red; flex-shrink: 0;margin-right: 5px; border-radius: 3px;}

.common_fff .colors_div .item0  .c{background: #2e73ea;}
.common_fff .colors_div .item1  .c{background: #28b84a;}
.common_fff .colors_div .item2  .c{background: #f59e0b;}
.common_fff .colors_div .item3  .c{background: #ef4444;}
.common_fff .colors_div .item4  .c{background: #c925d5;}
.common_fff .colors_div .item5  .c{background: #25d5b0;}
.common_fff .colors_div .item6  .c{background: #d5d5d5;}


.colors2{font-size: 12px; color: #999; padding: 10px 0;}
.colors2 .item{padding: 0 5px;}
.colors2 .c{width: 10px; height: 10px; background: red; flex-shrink: 0; margin-right: 5px; border-radius: 3px;}
.colors2 .c0{background: #ef4444;}
.colors2 .c1{background: #f59e0b;}
.colors2 .c2{background: #2e73ea;}
.colors2 .c3{background: #28b84a;}
.dlist .item{padding: 10px 0;}
.dlist .item .item_t{color: #999;font-size: 12px; margin-bottom: 5px;}
.dlist .item .bar{height: 10px; border-radius: 10px; background: #eee; overflow: hidden;}
.dlist .item .bar .bars{height: 10px; width: 20%; line-height: 10px; font-size: 10px; text-align: right; color: #fff; padding-right: 5px;}
.dlist .item .bar .bars.bars1{background: #ef4444;}
.dlist .item .bar .bars.bars2{background: #f59e0b;}
.dlist .item .bar .bars.bars3{background: #2e73ea;}
.dlist .item .bar .bars.bars4{background: #28b84a;}
.dlist .item .bar .bars:last-child{border-radius: 0 10px 10px 0;}
.dlist .item .bar .bars.bars_all{background:linear-gradient(90deg, #59d2a5 0%, #10c76a 100%);}
.tj_div{flex-wrap: wrap;gap:10px; display: grid; grid-template-columns:1fr 1fr 1fr;padding-bottom: 10px;}
.tj_div .tj_item{border: 1px solid #eee; border-radius: 5px; padding: 15px;}
.tj_div .tj_item .t{color: #999; font-size: 12px; margin-bottom: 5px;}
.tj_div .tj_item .pp{font-weight: bold; font-size: 32px;}

.bin_data{width: 100px; height: 100px; position: absolute;  border-radius: 50%; left: 50%; margin-left: -50px; top: 50%; margin-top: -50px; z-index: 2;}
.bin_data .p{font-size: 30px; font-weight: bold;}
.bin_data .t{font-size: 14px; }
</style>
